/*
 * @Author: zhangzhen
 * @Date: 2022-12-30 09:12:30
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-03-15 20:34:34
 *
 */
import React, {FC, useMemo, useImperativeHandle, useEffect} from 'react';
import {useGetState} from 'ahooks';
import {FormInstance, FormProps} from 'antd';
import {HTML5Backend} from 'react-dnd-html5-backend';
import {DndProvider} from 'react-dnd';
import {cloneDeep} from 'lodash';
import Main from './view/main';
import Left from './view/left';
import Right from './view/right';
import {FormContext, FormConTextValueType} from './context';
import styles from './styles.module.scss';
import {FormDesignType,LayoutType} from './constant';

// 暴露出去的方法
export type FormDesignRefType = {
    /**
     * 获取当前表单值
     */
    getFormData: () => FormConTextValueType[];
 
    /**
     * 获取表单布局
     */
    getLayoutParams: () => LayoutType;
    setLayoutParams: (values: LayoutType) => void;
    /**
     * 获取表单实例
     */
    getFormRef: () => FormInstance;
};

const FormDesign: FC<FormDesignType> = React.forwardRef(
    (
        {
            isEdit = true,
            defaultValue ,
            defaultLayout ,
            onlyShowForm = false,
            checkForm = false,
            onSubmit = () => {},
            formDefaultValue,
        },
        ref,
    ) => {
        // Context数据
        const [formConTextValue, setFormConTextValue, getFormConTextValue] =
            useGetState<FormConTextValueType[]>([]);
        const [isEditing, setIsEditing] = useGetState<boolean>(isEdit);
        const [currentItem, setCurrentItem] = useGetState<any>({});
        const [currentIndex, setCurrentIndex] = useGetState<any>(null);
        const [formRef, setFormRef, getFormRef] = useGetState<FormInstance>();
        const [layoutParams, setLayoutParams, getLayoutParams] =
        useGetState<LayoutType>({
            labelCol: 2,
            layout: 'horizontal',
            colSpan: 1,
        });

        // 暴露出form实例
        useImperativeHandle(ref, () => ({
            getFormData: getFormConTextValue,
            getLayoutParams,
            setLayoutParams,
            getFormRef,
        }));

        // 初始化赋值
      // 初始化赋值
      useEffect(() => {
        if (defaultValue) {
            setFormConTextValue(cloneDeep(defaultValue));
            setCurrentItem({});
            setCurrentIndex(0);
        }
        if (defaultLayout) {
            setLayoutParams(
                defaultLayout || {
                    layout: 'horizontal',
                    labelCol: 3,
                    colSpan: 1,
                },
            );
        }

        if (formDefaultValue) {
            formRef?.setFieldsValue(formDefaultValue);
        }
    }, [defaultValue, defaultLayout]);

        // 缓存Context数据
        const memoValue = useMemo(
            () => ({
                formConTextValue,
                setFormConTextValue,
                getFormConTextValue,
                isEditing,
                setIsEditing,
                currentItem,
                setCurrentItem,
                currentIndex,
                setCurrentIndex,
                formRef,
                setFormRef,
                setLayoutParams,
                layoutParams
            }),
            [
                formConTextValue,
                getFormConTextValue,
                setFormConTextValue,
                isEditing,
                setIsEditing,
                currentItem,
                setCurrentItem,
                currentIndex,
                setCurrentIndex,
                formRef,
                setFormRef,
                setLayoutParams,
                layoutParams
            ],
        );

        return (
            <FormContext.Provider value={memoValue}>
                <DndProvider backend={HTML5Backend}>
                    <div className={styles.formDesignBox}>
                        {(!onlyShowForm && !checkForm) && (
                            <Left isEdit={isEdit} />
                        )}
                        <Main
                            isEdit={isEdit}
                            onlyShowForm={onlyShowForm}
                            onSubmit={onSubmit}
                            checkForm={checkForm}
                        />
                        {(!onlyShowForm && !checkForm) && (
                            <Right currentItem={currentItem} isEdit={isEdit} />
                        )}
                    </div>
                </DndProvider>
            </FormContext.Provider>
        );
    },
);

export default FormDesign;
